<!-- 奖池组件 -->
<!-- XXX 已弃用，考虑删除 -->
<template>
  <div class="container">
    <!-- 12个升降的方块 -->
    <div
      v-for="item in 12"
      :key="item"
      class="item"
    >
      <!-- 矮方块 -->
      <image
        class="low-square"
        src="https://ustatic.hudongmiao.com/joymew-host-contest/lottery-low-square.png"
      />
      <!-- 高方块 -->
      <image
        class="high-square"
        :class="item % 2 === 0 ? 'even-high-square' : 'odd-high-square'"
        src="https://ustatic.hudongmiao.com/joymew-host-contest/lottery-high-square.png"
      />
      <!-- 奖品展示圆框 -->
      <div
        class="prize-circle"
        :class="item % 2 === 0 ? 'even-prize-circle' : 'odd-prize-circle'"
      >
        <!-- 奖品图片 -->
        <image
          class="prize-img"
          :src="currentPrizePoolImgList[item - 1]"
        />
      </div>
    </div>
    <!-- 奖品台 -->
    <image
      class="prize-stage"
      src="https://ustatic.hudongmiao.com/joymew-host-contest/lottery-prize-stage.png"
      @click.stop="changePopupType('prize-list')"
    />
    <!-- 中心水池 -->
    <image
      class="center-pool"
      src="https://ustatic.hudongmiao.com/joymew-host-contest/lottery-center-pool.png"
    />
    <!-- 奖品列表按钮 -->
    <div
      class="prize-list-btn"
      @click.stop="changePopupType('prize-list')"
    >
      奖品列表 >
    </div>
    <!-- 地面 -->
    <image
      class="ground"
      src="https://ustatic.hudongmiao.com/joymew-host-contest/lottery-ground.png"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { activity520EndTime, activity520StartTime, prizePool520ImgList, prizePoolImgList } from '@/static/constant/lottery-constant';
import { useLottery } from '@/stores/lottery';
import { isBetweenTime } from '@/utils/tools';

const lottery = useLottery();
const { changePopupType } = lottery;

/** 奖池图片列表 */
const currentPrizePoolImgList = ref(prizePoolImgList);
onMounted(() => {
  // 如果是520活动期间，就使用520的奖池图片
  if (isBetweenTime(activity520StartTime, activity520EndTime)) {
    currentPrizePoolImgList.value = prizePool520ImgList;
  }
});

</script>

<style lang="scss" scoped>
.container {
  position: relative;

  width: 100vw;
  height: 78vw;

  display: grid;
  grid-template-rows: 0 repeat(10, 27px);
  grid-template-columns: 10px repeat(10, 46px);

  .item {
    position: relative;

    width: 81px;
    height: 128px;

    // 设置蒙版
    mask-image: url("https://ustatic.hudongmiao.com/joymew-host-contest/lottery-mask.png");
    mask-position: cover;
    mask-size: 100%;
    mask-repeat: no-repeat;

    // background-color: #fff;

    // 矮方块
    .low-square {
      position: absolute;
      bottom: 0;
      left: 0;

      width: 80px;
      height: 60px;
    }

    // 高方块
    .high-square {
      position: absolute;
      bottom: 0;
      left: 0;

      width: 81px;
      height: 66px;

      // 奇数高方块
      &.odd-high-square {
        animation: odd-high-square 3s ease-in-out infinite;

        @keyframes odd-high-square {
          // 一开始是下降的状态
          0% {
            opacity: 0;

            transform: translateY(7px);
          }

          // 在最低点停留1秒
          33% {
            opacity: 0;

            transform: translateY(7px);
          }

          // 0.5秒时，上升到最高点
          50% {
            opacity: 1;

            transform: translateY(0);
          }

          // 在最高点停留1秒
          83% {
            opacity: 1;

            transform: translateY(0);
          }

          // 最后，回到最低点
          100% {
            opacity: 0;

            transform: translateY(7px);
          }
        }
      }

      // 偶数高方块
      &.even-high-square {
        animation: even-high-square 3s ease-in-out infinite;
      }

      @keyframes even-high-square {
        // 一开始是在最高点
        0% {
          opacity: 1;

          transform: translateY(0);
        }

        // 在最高点停留1秒
        33% {
          opacity: 1;

          transform: translateY(0);
        }

        // 使用0.5秒，下降到最低点
        50% {
          opacity: 0;

          transform: translateY(7px);
        }

        // 在最低点停留1秒
        83% {
          opacity: 0;

          transform: translateY(7px);
        }

        // 最后，回到最高点
        100% {
          opacity: 1;

          transform: translateY(0);
        }
      }

    }

    // 奖品展示圆框
    .prize-circle {
      position: absolute;
      top: 0;
      left: 50%;

      width: 64px;
      height: 64px;
      overflow: hidden;

      background: #fff;
      border: 2px solid #ffc896;
      border-radius: 50%;

      // 奖品展示圆框的动画
      transform-origin: 'bottom left';

      .prize-img {
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        border-radius: 5px;
      }

      // 偶数奖品展示圆框的动画
      &.even-prize-circle {
        // display: none;
        animation: even-prize-circle 3s ease-in-out 0s infinite;

        @keyframes even-prize-circle {
          // 一开始是显示的
          0% {
            transform: translateX(-50%) translateY(0) scale(1);
          }

          // 维持1秒显示
          33% {
            transform: translateX(-50%) translateY(0) scale(1);
          }

          // 使用0.5秒，隐藏
          50% {
            transform: translateX(-50%) translateY(7px) scale(0);
          }

          // 维持1秒隐藏
          83% {
            transform: translateX(-50%) translateY(7px) scale(0);
          }

          // 最后重新恢复显示状态
          100% {
            transform: translateX(-50%) translateY(0) scale(1);
          }
        }
      }

      // 奇数奖品展示圆框的动画
      &.odd-prize-circle {
        animation: odd-prize-circle 3s ease-in-out infinite;

        @keyframes odd-prize-circle {
          // 一开始是不显示的
          0% {
            transform: translateX(-50%) translateY(7px) scale(0);
          }

          // 维持1秒不显示
          33% {
            transform: translateX(-50%) translateY(7px) scale(0);
          }

          // 使用0.5秒，恢复显示状态
          50% {
            transform: translateX(-50%) translateY(0) scale(1);
          }

          // 维持1秒显示
          83% {
            transform: translateX(-50%) translateY(0) scale(1);
          }

          // 最后重新恢复隐藏状态
          100% {
            transform: translateX(-50%) translateY(7px) scale(0);
          }
        }
      }

    }

    // // 12个方块的位置
    &:nth-child(1) {
      z-index: 1;
      grid-row: 2 / span 2;
      grid-column: 5 / span 2;
    }

    &:nth-child(2) {
      z-index: 2;
      grid-row: 3 / span 2;
      grid-column: 6 / span 2;
    }

    &:nth-child(3) {
      z-index: 3;
      grid-row: 4 / span 2;
      grid-column: 7 / span 2;
    }

    &:nth-child(4) {
      z-index: 4;
      grid-row: 5 / span 2;
      grid-column: 8 / span 2;
    }

    &:nth-child(5) {
      z-index: 5;
      grid-row: 6 / span 2;
      grid-column: 7 / span 2;
    }

    &:nth-child(6) {
      z-index: 6;
      grid-row: 7 / span 2;
      grid-column: 6 / span 2;
    }

    &:nth-child(7) {
      z-index: 7;
      grid-row: 8 / span 2;
      grid-column: 5 / span 2;
    }

    &:nth-child(8) {
      z-index: 6;
      grid-row: 7 / span 2;
      grid-column: 4 / span 2;
    }

    &:nth-child(9) {
      z-index: 5;
      grid-row: 6 / span 2;
      grid-column: 3 / span 2;
    }

    &:nth-child(10) {
      z-index: 4;
      grid-row: 5 / span 2;
      grid-column: 2 / span 2;
    }

    &:nth-child(11) {
      z-index: 3;
      grid-row: 4 / span 2;
      grid-column: 3 / span 2;
    }

    &:nth-child(12) {
      z-index: 2;
      grid-row: 3 / span 2;
      grid-column: 4 / span 2;
    }
  }

  // 奖品台
  .prize-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;

    width: 16.1538vw;
    height: 17.6923vw;

    transform: translate(-50%, -50%);
  }

  // 中心水池
  .center-pool {
    position: absolute;
    top: 36.5%;
    left: 50%;
    z-index: -20;

    width: 49.4872vw;
    height: 28.4615vw;

    transform: translateX(-50%);
  }

  // 奖品列表按钮
  .prize-list-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;

    width: 58px;
    height: 19px;

    background: rgba($color: #0037ff, $alpha: 30%);
    border-radius: 45px;

    transform: translateX(-50%);

    font-size: 9px;
    line-height: 18px;
    color: #fff;
    text-align: center;
  }

  // 地面
  .ground {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -10;

    width: 100vw;
    height: 58.7179vw;
  }
}
</style>
